import { ref } from 'vue'
import * as echarts from 'echarts'

export function useOptions() {
  // 第一个echarts配置
  const chartRoundOptionsOne = ref({
    // backgroundColor: '#050038',
    title: {
      text: '',
      textStyle: {
        fontWeight: 'normal',
        fontSize: '12px',
        color: 'rgb(97, 142, 205)'
      }
    },
    series: [
      {
        type: 'liquidFill',
        radius: '50%',
        center: ['50%', '50%'],
        data: [0.5, 0.5, 0.5], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: 'rgb(255,0,255,0.1)'
        },
        // 修改波浪颜色
        // color:['yellow'], 所有波浪一个颜色
        // color:['yellow','red','pink'], 每个波浪不同颜色，颜色数组长度为对应的波浪个数
        label: {
          normal: {
            formatter: (0.5 * 100).toFixed(2) + '%',
            textStyle: {
              fontSize: '20px'
            }
          }
        },
        outline: {
          show: false
        }
      },
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['50%', '52%'],
        hoverAnimation: false,
        data: [
          {
            name: '',
            value: 500,
            labelLine: {
              show: false
            },
            itemStyle: {
              color: '#5886f0'
            },
            emphasis: {
              labelLine: {
                show: false
              },
              itemStyle: {
                color: '#5886f0'
              }
            }
          },
          {
            //画中间的图标
            name: '',
            value: 4,
            labelLine: {
              show: false
            },
            itemStyle: {
              color: '#ffffff',
              normal: {
                color: '#5886f0',
                borderColor: '#5886f0',
                borderWidth: 20
                // borderRadius: '100%'
              }
            },
            label: {
              borderRadius: '100%'
            },
            emphasis: {
              labelLine: {
                show: false
              },
              itemStyle: {
                color: '#5886f0'
              }
            }
          },
          {
            // 解决圆点过大后续部分显示明显的问题
            name: '',
            value: 4,
            labelLine: {
              show: false
            },
            itemStyle: {
              color: '#5886f0'
            },
            emphasis: {
              labelLine: {
                show: false
              },
              itemStyle: {
                color: '#5886f0'
              }
            }
          },
          {
            //画剩余的刻度圆环
            name: '',
            value: 88,
            itemStyle: {
              color: '#050038'
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            emphasis: {
              labelLine: {
                show: false
              },
              itemStyle: {
                color: 'rgba(255,255,255,0)'
              }
            }
          }
        ]
      }
    ]
  })
  // 第二个echarts配置
  var female =
    ''
  var male =
    ''

  let maleValue = 20
  let femaleValue = 10

  let total = maleValue + femaleValue
  let malePercent = maleValue / total
  let femalePercent = femaleValue / total
  const chartRoundOptionsTwo = ref({
    // backgroundColor: '#051523',
    xAxis: {
      type: 'value',
      show: false
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        data: ['男生'],
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      {
        type: 'category',
        inverse: true,
        data: ['女生'],
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: 20,
        data: [malePercent],
        z: 20,
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: '#3E6DFF'
          }
        }
      },
      {
        type: 'bar',
        barWidth: 20,
        data: [0],
        barGap: '-100%',
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: 'rgba(0,0,0,0)'
          }
        },
        markPoint: {
          symbol: 'rect',
          // x:'0%',
          symbolSize: [45, 122],
          symbolOffset: [-35, 0],
          label: {
            color: 'rgba(0,0,0,0)',
            formatter: (params) => {
              console.log('params', params)
              return `{value|${(malePercent * 100).toFixed(2)}%}\n\n\n\n\n\n\n{name|${params.name}}`
            },
            rich: {
              value: {
                color: 'rgba(0, 252, 253, 1)',
                fontSize: '20px',
                padding: [0, 0, 0, 150],
                fontWeight: 'bold'
              },
              name: {
                color: 'rgba(134, 157, 229, 1)',
                fontSize: '20px',
                padding: [0, 0, 0, 150],
                fontWeight: 'bold'
              }
            }
          }
          // data: [{
          //     name: '男生',
          //     type: 'max',
          //     symbol: 'image://' + male
          // }]
        }
      },
      {
        type: 'bar',
        barWidth: 20,
        data: [1],
        barGap: '-100%',
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: '#00FCFD'
          }
        },
        markPoint: {
          symbol: 'rect',
          // x:'0%',
          symbolSize: [52, 122],
          symbolOffset: [35, 0],
          label: {
            color: 'rgba(0,0,0,0)',
            formatter: (params) => {
              console.log('params', params)
              return `{value|${(femalePercent * 100).toFixed(2)}%}\n\n\n\n\n\n\n{name|${params.name}}`
            },
            rich: {
              value: {
                color: 'rgba(0, 252, 253, 1)',
                fontSize: '20px',
                padding: [0, 160, 0, 0],
                fontWeight: 'bold'
              },
              name: {
                color: 'rgba(134, 157, 229, 1)',
                fontSize: '20px',
                padding: [0, 160, 0, 40],
                fontWeight: 'bold'
              }
            }
          }
          // data: [{
          //     name: '女生',
          //     type: 'max',
          //     symbol: 'image://' + female
          // }]
        }
      }
    ]
  })
  // 第三个echartss配置
  var data = [
    {
      name: '10岁以下',
      value: 10
    },
    {
      name: '10-18岁',
      value: 15
    },
    {
      name: '18-30岁',
      value: 25
    },
    {
      name: '30-40岁',
      value: 20
    },
    {
      name: '40-60岁',
      value: 10
    },
    {
      name: '60岁以上',
      value: 20
    }
  ]
  const chartRoundOptionsThree = ref({
    color: ['#A0CE3A', '#31C5C0', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', 'rgba(250,250,250,0.3)'],
    title: {
      text: '总数',
      subtext: 7789,
      left: 105,
      textStyle: {
        color: '#f2f2f2',
        fontSize: '12px'
        // align: 'center'
      },
      subtextStyle: {
        fontSize: '12px',
        color: ['#ff9d19']
      },
      x: 'center',
      y: 'center'
    },
    grid: {
      bottom: 150,
      left: 100,
      right: '10%'
    },
    legend: {
      orient: 'vertical',
      top: 'middle',
      right: '5%',
      textStyle: {
        color: '#f2f2f2',
        fontSize: '16px'
      },
      icon: 'roundRect',
      data: data
    },
    series: [
      // 主要展示层的
      {
        radius: ['30%', '70%'],
        center: ['35%', '50%'],
        type: 'pie',
        label: {
          normal: {
            show: true,
            formatter: '{c}%',
            textStyle: {
              fontSize: '16px'
            },
            position: 'inside'
          },
          emphasis: {
            show: true
          }
        },
        labelLine: {
          normal: {
            show: true,
            length: 30,
            length2: 55
          },
          emphasis: {
            show: true
          }
        },
        name: '民警训练总量',
        data: data
      },
      // 边框的设置
      {
        radius: ['30%', '34%'],
        center: ['35%', '50%'],
        type: 'pie',
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        animation: false,
        tooltip: {
          show: false
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: 'rgba(250,250,250,0.3)'
            }
          }
        ]
      }
      // {
      //   name: '外边框',
      //   type: 'pie',
      //   clockWise: false, //顺时加载
      //   hoverAnimation: false, //鼠标移入变大
      //   center: ['40%', '50%'],

      //   label: {
      //     normal: {
      //       show: false
      //     }
      //   },
      //   data: [
      //     {
      //       value: 9,
      //       name: '',
      //       itemStyle: {
      //         normal: {
      //           borderWidth: 2,
      //           borderColor: '#0b5263'
      //         }
      //       }
      //     }
      //   ]
      // }
    ]
  })
  // 第四个配置
  var data = [
    { code: '峨眉山', stock: '8.00w', fundPost: '80' },
    { code: '稻城亚丁', stock: '6.00w', fundPost: '30' },
    { code: '九寨沟', stock: '4.00w', fundPost: '50' },
    { code: '万里长城', stock: '3.00w', fundPost: '39' }
  ]
  function contains(arr, dst) {
    var i = arr.length
    while ((i -= 1)) {
      if (arr[i] == dst) {
        return i
      }
    }
    return false
  }

  var attackSourcesColor = [
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
      { offset: 0, color: '#EB3B5A' },
      { offset: 1, color: '#FE9C5A' }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
      { offset: 0, color: '#FA8231' },
      { offset: 1, color: '#FFD14C' }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
      { offset: 0, color: '#F7B731' },
      { offset: 1, color: '#FFEE96' }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
      { offset: 0, color: '#395CFE' },
      { offset: 1, color: '#2EC7CF' }
    ])
  ]
  var attackSourcesColor1 = ['#EB3B5A', '#FA8231', '#F7B731', '#3860FC']
  var attaData = []
  var attaName = []
  var topName = []
  data.forEach((it, index) => {
    attaData[index] = it.fundPost
    attaName[index] = it.stock
    topName[index] = `${it.code} `
  })
  var salvProMax = [] //背景按最大值
  for (let i = 0; i < attaData.length; i++) {
    salvProMax.push(attaData[0])
  }
  function attackSourcesDataFmt(sData) {
    var sss = []
    sData.forEach(function (item, i) {
      let itemStyle = {
        color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
      }
      sss.push({
        value: item,
        itemStyle: itemStyle
      })
    })
    return sss
  }

  const chartRoundOptionsFour = ref({
    tooltip: {
      show: false,
      backgroundColor: 'rgba(3,169,244, 0.5)', //背景颜色（此时为默认色）
      textStyle: {
        fontSize: '16px'
      }
    },
    color: ['#F7B731'],
    grid: {
      left: '0%',
      right: '5%',
      width: 300,
      bottom: '2%',
      top: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'value',

      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisPointer: {
          label: {
            show: true
            //margin: 30
          }
        },
        pdaaing: [5, 0, 0, 0],
        postion: 'left',
        data: attaName,
        axisLabel: {
          margin: 50,
          fontSize: '10px',
          align: 'left',
          padding: [2, 0, 0, 0],
          color: '#000',
          rich: {
            nt1: {
              color: '#fff',
              backgroundColor: attackSourcesColor1[0],
              width: 13,
              height: 13,
              fontSize: '10px',
              align: 'center',
              borderRadius: 100,
              lineHeight: '5',
              padding: [2, 1, 2, 1]
              // padding:[0,0,2,0],
            },
            nt2: {
              color: '#fff',
              backgroundColor: attackSourcesColor1[1],
              width: 13,
              height: 13,
              fontSize: '10px',
              align: 'center',
              borderRadius: 100,
              padding: [2, 1, 2, 1]
            },
            nt3: {
              color: '#fff',
              backgroundColor: attackSourcesColor1[2],
              width: 13,
              height: 13,
              fontSize: '10px',
              align: 'center',
              borderRadius: 100,
              padding: [2, 1, 2, 1]
            },
            nt: {
              color: '#fff',
              backgroundColor: attackSourcesColor1[3],
              width: 13,
              height: 13,
              fontSize: '10px',
              align: 'center',
              lineHeight: 3,
              borderRadius: 100,
              padding: [2, 1, 2, 1],
              lineHeight: 5
            }
          },
          formatter: function (value, index) {
            index = contains(attaName, value) + 1
            if (index - 1 < 3) {
              return ['{nt' + index + '|' + index + '}'].join('\n')
            } else {
              return ['{nt|' + index + '}'].join('\n')
            }
          }
        }
      },
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: '14px'
          }
        },
        data: attackSourcesDataFmt(attaName)
      },
      {
        //名称
        type: 'category',
        offset: -10,
        position: 'left',
        axisLabel: {
          color: `#fff`,
          fontSize: '10px'
        },
        axisLine: {
          show: false
        },
        inverse: false,
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          color: ['#fff'],
          align: 'left',
          verticalAlign: 'bottom',
          lineHeight: 32,
          fontSize: '10px'
        },
        data: topName
      }
    ],
    series: [
      {
        zlevel: 1,
        name: '个人所得(亿元)',
        type: 'bar',
        barWidth: '15px',
        animationDuration: 1500,
        data: attackSourcesDataFmt(attaData),
        align: 'center',
        itemStyle: {
          normal: {
            barBorderRadius: 10
          }
        },
        label: {
          show: true,
          fontSize: '10px',
          color: '#fff',
          textBorderWidth: 2,
          padding: [2, 0, 0, 0]
        }
      },
      {
        name: '个人所得(亿元)',
        type: 'bar',
        barWidth: 15,
        barGap: '-100%',
        margin: '20',
        data: salvProMax,
        textStyle: {
          //图例文字的样式
          fontSize: '10px',
          color: '#fff'
        },
        itemStyle: {
          normal: {
            color: '#05325F',
            //width:"100%",
            fontSize: '10px',
            barBorderRadius: 30
          }
        }
      }
    ]
  })
  // 第五个配置
  const chartRoundOptionsFive = ref({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#57617B'
        }
      }
    },
    legend: {
      icon: 'rect',
      itemWidth: 14,
      itemHeight: 5,
      itemGap: 13,
      data: ['移动', '电信', '联通'],
      right: '4%',
      top: '3%',
      textStyle: {
        fontSize: '12px',
        color: '#F1F1F3'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '2%',
      height: 250,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#57617B'
          }
        },
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      },
      {
        axisPointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#57617B'
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '人数',
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: '12px'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#57617B'
          }
        }
      }
    ],
    series: [
      {
        name: '移动',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(137, 189, 27, 0.3)'
                },
                {
                  offset: 0.8,
                  color: 'rgba(137, 189, 27, 0)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(137,189,27)',
            borderColor: 'rgba(137,189,2,0.27)',
            borderWidth: 12
          }
        },
        data: [20, 50, 50, 70, 120, 120, 150, 170, 150, 122, 165, 100]
      },
      {
        name: '电信',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0, 136, 212, 0.3)'
                },
                {
                  offset: 0.8,
                  color: 'rgba(0, 136, 212, 0)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(0,136,212)',
            borderColor: 'rgba(0,136,212,0.2)',
            borderWidth: 12
          }
        },
        data: [20, 30, 50, 60, 100, 165, 80, 170, 182, 110, 134, 150]
      },
      {
        name: '联通',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(219, 50, 51, 0.3)'
                },
                {
                  offset: 0.8,
                  color: 'rgba(219, 50, 51, 0)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(219,50,51)',
            borderColor: 'rgba(219,50,51,0.2)',
            borderWidth: 12
          }
        },
        data: [50, 70, 125, 145, 122, 191, 70, 150, 120, 110, 70, 20]
      }
    ]
  })
  // 第六个配置
  var giftImageUrl =
    ''

  const chartRoundOptionsSix = ref({
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {d}% <br/> {c}'
    },
    graphic: {
      elements: [
        {
          type: 'image',
          style: {
            image: giftImageUrl,
            width: 50,
            height: 50
          },
          left: 'center',
          top: 'center'
        }
      ]
    },
    legend: {
      orient: 'horizontal',
      icon: 'circle',
      bottom: 5,
      x: 'center',
      textStyle: {
        color: '#fff'
      },
      data: ['智慧文旅', '携程', '飞猪', '其他平台']
    },
    series: [
      {
        type: 'pie',
        radius: ['60%', '50%'],
        center: ['50%', '50%'],
        color: ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B'],
        data: [
          {
            value: 335,
            name: '智慧文旅'
          },
          {
            value: 310,
            name: '携程'
          },
          {
            value: 234,
            name: '飞猪'
          },
          {
            value: 235,
            name: '其他平台'
          }
        ],
        labelLine: {
          normal: {
            show: true,
            length: 20,
            length2: 20,
            lineStyle: {
              color: '#12EABE',
              width: 2
            }
          }
        },
        label: {
          normal: {
            formatter: '{c|{c}}\n{hr|}\n{d|{d}%}',
            rich: {
              b: {
                fontSize: '20px',
                color: '#12EABE',
                align: 'left',
                padding: 4
              },
              hr: {
                borderColor: '#12EABE',
                width: '100%',
                borderWidth: 2,
                height: 0
              },
              d: {
                fontSize: '20px',
                color: '#fff',
                align: 'left',
                padding: 4
              },
              c: {
                fontSize: '20px',
                color: '#fff',
                align: 'left',
                padding: 4
              }
            }
          }
        }
      }
    ]
  })
  // 第七个配置
  let label = ['10/01', '10/07', '10/14', '10/18', '10/24', '10/26', '10/28', '10/31']
  let value = [50, 120, 200, 180, 58, 90, 180, 120]
  const chartRoundOptionsSeven = ref({
    // backgroundColor: '#101e44',
    grid: {
      containLabel: true,
      height: 150,
      width: 1000,
      left: 5,
      top: 40
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255,255,255,0)' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: 'rgba(255,255,255,1)' // 100% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255,255,255,0)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          formatter: '{value}',
          fontSize: '14px',
          margin: 20,
          textStyle: {
            color: '#7ec7ff'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#243753'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#243753'
          }
        },
        axisTick: {
          show: false
        },
        data: label
      }
    ],
    yAxis: [
      {
        boundaryGap: false,
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#7ec7ff'
          }
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: '12px',
          lineHeight: 40
        },
        splitLine: {
          lineStyle: {
            color: '#243753'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#283352'
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '报名',
        type: 'line',
        smooth: true,
        showSymbol: true,
        symbolSize: 8,
        zlevel: 3,
        itemStyle: {
          color: '#19a3df',
          borderColor: '#a3c8d8'
        },
        lineStyle: {
          normal: {
            width: 6,
            color: '#19a3df'
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(88,255,255,0.2)'
                },
                {
                  offset: 0.8,
                  color: 'rgba(88,255,255,0)'
                }
              ],
              false
            )
          }
        },
        data: value
      }
    ]
  })
  return {
    chartRoundOptionsOne,
    chartRoundOptionsTwo,
    chartRoundOptionsThree,
    chartRoundOptionsFour,
    chartRoundOptionsFive,
    chartRoundOptionsSix,
    chartRoundOptionsSeven
  }
}
